<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head profile="http://www.w3.org/2005/10/profile">
    <title>
      MyTODO
    </title>
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />
    <link rel="icon" type="image/ico" href="images/favicon.ico">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.example.js"></script>
    <script type="text/javascript" src="js/jquery.template.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker-en-GB.js"></script>
    <script type="text/javascript" src="js/jquery.tagsinput.js"></script>
    <script type="text/javascript" src="js/jquery.url.decoder.js"></script>
    <script type="text/javascript" src="js/jquery.cookies.js"></script>
    <script type="text/javascript" src="js/jquery.bt.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.dialog.js"></script>
    <script type="text/javascript" src="js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="span3 pointer" onclick="document.location.href = 'home.html'">
        <h1 id="logo-part">MyTODO</h1>
        <img src="images/tick_logo.png" id="header-logo" alt="MyTODO">
      </div>
      <div class="span3">
        <br>
        TODO-s today: <span id="TODOsToday">0</span>
        <br>
        TODO-s this week: <span id="TODOsThisWeek">0</span>
        <br>
        TODO-s Archived: <span id="TODOsArchived">0</span>
        <br>
      </div>
      <div class="span2">
        <br/>
        <span>Choose project: </span><br/>
        <select class="grey" id="projectSelection" onchange="changeProject(event)">
          <option value="todoList.json">DND</option>
          <option value="todoSchool.json">SCHOOL</option>
          <option value="todoWork.json">WORK</option>
          <option value="new">-- ADD NEW --</option>
        </select>
      </div>
      <div class="span4">
        <a class="btn right" href="index.html"><i class="icon-cog"></i><span id="loggedUser" class="hundred"> LOG OUT </span></a>
        <span class="right loggedInUser">UNKNOWN USER </span>
        <br/><br/>
        <div class="form-search right">
          <img src="images/info.png" id="searchHelp" class="target beautyTip leftTip" alt="searchHelp" title="For more specific search insert the parameter name you want to search from with a colon. <br> e.g.<br> 'tags: DND' or <br>'deadline : 20/04/2012' <br>Supported parameters : <br> id, topic, comment, tags, deadline"/>
          <input type="text" id="filter" class="input-medium search-query" onkeypress="quickSearch(event)">
          <button type="button" class="btn" onclick="search()"><i class="icon-search"></i></button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="span3">
        <input type="button" class="input-medium" id="current" value="CURRENT" onclick="document.location.href='home.html'">
      </div>
      <div class="span3">
        <input type="button" class="input-medium" id="archive" value="ARCHIVE">
      </div>
      <div class="span6">
        <input type="button" class="input-medium" id="addNew" value="ADD NEW TODO" onclick="addNew()">
      </div>
    </div>
    <div class="row">
      <div class="span12">
        <table class="table" id="todoTable">
          <thead>
            <tr>
              <th>
              </th>
              <th onclick="sortByTopic()">
                Assignment
              </th>
              <th>
                Deadline
              </th>
              <th>
                Priority
              </th>
              <th>
                Status
              </th>
              <th>
              </th>
            </tr>
          </thead>
          <tbody id="todoList">
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="addProject">
    Please enter project name:
    <input type="text" name="projectName" id="projectName" onkeypress="quickCreateProject(event)"/>
    <div>
      <input type="button" onclick="cancelNewProject()" class="input-medium" value="CANCEL" />
      <input type="button" onclick="createProject()" class="input-medium" value="OK" />
    </div>
  </div>
  </body>
</html>
<script id="TODOTemplate" type="text/x-jquery-tmpl">
  <tr id="${id}" class="collapsed-TODO">
    <td onclick="expandTODO('${id}')" class="pointer id">
      &#9654;
    </td>
    <td onclick="expandTODO('${id}')" class="pointer">
      <span class="tags">${tags}</span> <span class="topic">${topic}</span>
    </td>
    <td onclick="expandTODO('${id}')" class="pointer deadline">
      ${deadline}
    </td>
    <td class="priority collapsed-priority">
      <div class="bars"></div>
      <input type="hidden" class="priorityNumber" value="${priority}"/>
    </td>
    <td>
      <input type="button" value="${status}" class="input-medium search-query statusButton ${status}">
    </td>
    <td>
      <input type="button" value="X" onclick="deleteTODO('${id}')" class="input-medium search-query">
    </td>
  </tr>
</script>
<script id="TODOExtendedTemplate" type="text/x-jquery-tmpl">
  <tr id="${id}_extended" class="black extended-TODO">
    <td colspan="6">
      <div onclick="unExpandAndSaveTODO('${id}')" class="silverBar pointer id">
        <span class="id">&#9660;</span>
      </div>
      <div class="head">
        TOPIC:
      </div>
      <input type="text" value="${topic}" class="extended topic"/>
      <div class="head">
        Deadline:
      </div>
      <input id="${id}_deadline" type="text" value="${deadline}" class="date pointer half"/>
      <img src="images/info.png"  class="target beautyTip rightTip" alt="deadlineHelp" title="Here you can choose the deadline for your TODO. You can use any formats you like but in order to enjoy the most of the features available and for better overview the format dd/MM/yyyy is recommended."/>
      <div class="head">
        Tags:
      </div>
      <input name="tags" id="${id}_tags" class="tagsInput tagHolder green half left" type="text" value="${tags}"/>
      <div class="head">
        Comments:
      </div>
      <input  type="text" value="${comment}" class="extended"/>
      <div class="head">
        Priority:
      </div>
      <div class="extended priority priorityPicker">
        <span class="bars "></span>
         <img src="images/info.png" class="target beautyTip rightTip" alt="priorityHelp" title="You can assign priorities to your TODO-s by clicking these horizontal bars. <br> The more important the task is for you, the more bars you should assign to the TODO."/>
        <input type="hidden" class="priorityNumber" value="${priority}"/>
      </div>
      <span class="padded">Status:</span><br />
      <select class="grey half stateSelection" >
        <option value="START">NOT YET STARTED</option>
        <option value="FINISH">STARTED</option>
        <option value="DONE">DONE</option>
      </select>
      <br />
      <input  type="button" value="SAVE" class="extended date" onclick="unExpandAndSaveTODO('${id}')"/>
    </td>
  </tr>
</script>